<template>
  <view class="address-index" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">地址管理</view>
		</view>
		<view class="navigation-position"></view>
    <view class="content">
      <view class="items">
        <card-com :show-gap="false" v-for="address in userAddresses" :key="address.id">
          <view class="item">
            <view class="address">
              <view class="desc" @click="chooseAddressForOrder(address)">
                <view class="title">
                  <view class="name">{{ address.contact_name }}</view>
                  <view class="phone">{{ address.contact_phone }}</view>
                </view>
                <view class="address">
                  {{ address.full_address }}
                </view>
              </view>
              <image class="edit" src="/static/images/edit.png" @click="goToAddressForm(address.id)"></image>
            </view>
            <view class="operate">
              <view class="default">
                <block v-if="address.is_default">
                  <view class="dot"></view>
                  <view class="text">默认地址</view>
                </block>
              </view>
              <view class="delete" @click="remove(address.id)">删除</view>
            </view>
          </view>
        </card-com>
      </view>
      <view class="create">
        <button class="button" :plain="true" @click="goToAddressForm(null)">+新建收货地址</button>
      </view>
    </view>
  </view>
</template>

<script>
import _ from 'lodash'
import store from 'store'
import { mapGetters, mapActions } from 'vuex'
import { deleteAddress } from "api/addressApi";

export default {
  name: "index",
  store,
  computed: {
    ...mapGetters([
      'userAddresses',
      'isAddressChosenForOrder',
			'statusBar'
    ])
  },
  methods: {
    ...mapActions([
      'getUserAddresses',
      'updateUserAddresses',
      'updateCurrentAddress',
      'updateIsAddressChosenForOrder'
    ]),
		back(){
			uni.navigateBack()
		},
    remove(id) {
      uni.showModal({
        title: '提示',
        content: '确定删除当前收货地址吗？',
        success: async (res) => {
          if (res.confirm) {
            await deleteAddress(id)
            let addresses = this.userAddresses
            _.remove(addresses, (address) => {
              return address.id === id
            })
            await this.updateUserAddresses([])
            await this.updateUserAddresses(addresses)
            uni.showToast({title: '地址已删除', duration: 2000, icon: 'success'})
          }
        }
      })
    },
    goToAddressForm(id = null) {
      if (id) {
        uni.navigateTo({url: `/packs/pages/address/form?id=${id}`})
      } else {
        uni.navigateTo({url: `/packs/pages/address/form`})
      }
    },
    async chooseAddressForOrder(address = {}) {
      if (this.isAddressChosenForOrder) {
        await this.updateCurrentAddress(address)
        // uni.navigateTo({url: `/packs/pages/order/confirm`})
				uni.navigateBack({})
      }
    }
  },
	async onShow (){
		await this.getUserAddresses()
	}
}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
.address-index {
  .content {
    padding: 20rpx;
    .items {
      .item {
        .address {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .desc {
            width: 550rpx;
            .title {
              display: flex;
              align-items: center;
              .name {
                font-size:28rpx;
                font-weight: 500;
                color: #333333;
                margin-right: 20rpx;
              }
              .phone {
                font-size: 28rpx;
                color: #999;
              }
            }
            .address {
              font-size: 28rpx;
              color: #999;
			  margin-top:12rpx;
            }
          }
          .edit {
            width: 48rpx;
            height: 48rpx;
            margin-right: 20rpx;
          }
        }
        .operate {
          display: flex;
          justify-content: space-between;
          border-top: 1px #EEEEEE solid;
          margin-top: 20rpx;
          padding-top: 20rpx;
          .default {
            display: flex;
            align-items: center;
            .dot {
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              background-color: #E97254 ;
              margin-right: 10rpx;
            }
            .text {
              font-size: 28rpx;
              color: #999;
            }
          }
          .delete {
            font-size: 28rpx;
            color: #999;
            margin-right: 20rpx;
          }
        }
      }
    }
    .create {
      padding: 50rpx 0;
      .button {
        width: 302rpx;
        height: 62rpx;
        line-height: 62rpx;
        background: #E97254 ;
        border: none;
        border-radius: 4rpx;
        font-size: 30rpx;
        color: #fff;
      }
    }
  }
}
</style>
